<template>
    <div>
        <!-- 省份选择 -->
        <el-select 
            v-model="baseMsg.selectBox" 
            placeholder="选择区域"
            filterable 
            @change="regionChange"
            >
            <el-option
                label="全国"
                value="0">
                </el-option>
            <el-option
                v-for="item in baseRegions"
                :key="item.code"
                :label="item.value"
                :value="item.code">
                </el-option>
        </el-select>
        <!-- 选择结果收集 -->
        <el-row class="check-box" v-if="baseMsg.checkBox.length>0">
            <el-col :span="18">
                <el-button-group>
                    <el-button type="primary" @click="checkAll">全选</el-button>
                    <el-button @click="checkNone">全不选</el-button>
                </el-button-group>
                <div class="check-box-item">
                    <el-checkbox-group v-model="msg.regionList" size="mini">
                        <template v-for="item in baseMsg.checkBox">
                            <el-checkbox :label="item.value" border :key="item.code"></el-checkbox>
                        </template>
                    </el-checkbox-group>
                </div>
            </el-col>
            <el-col :span="6">
                <el-button @click="clearRegions">清除条件</el-button>
                <!-- 渲染方式1：多选框 -->
                <!-- <el-checkbox-group v-model="msg.regionList" size="mini">
                    <template v-for="(item, index) in msg.regionList">
                        <el-checkbox :label="item" border :key="index"></el-checkbox>
                    </template>
                </el-checkbox-group> -->
                <!-- 渲染方式2：标签 -->
                <div class="check-box-item">
                    <el-tag
                        v-for="(item, index) in msg.regionList"
                        :key="index"
                        closable
                        @close="delTag(index)"
                        >
                        {{item}}
                    </el-tag>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import Axios from 'axios'

let apiUrl = 'http://172.30.11.152/api/region/list/'

export default {
    props:[
        "msg",
        "baseMsg"
    ],
    data(){
        return {
            baseRegions: [] // 用于收集固定省份列表
        }
    },
    computed:{
        curCheckBox(){
            return this.baseMsg.checkBox.map(item=>item.value)
        },
        // curCheckBoxLength(){
        //     console.log(this.baseMsg.checkBox)
        //     return this.baseMsg.checkBox.length
        // }
    },
    methods:{
        regionChange(code){
            getRegionData({level:'2', code:code}).then(data=>{
                this.baseMsg.checkBox = data
            })
        },
        // 清除条件
        clearRegions(){
            this.msg.regionList = []
        },
        // 全选(并集)
        checkAll(){
            this.msg.regionList = [...new Set([...this.msg.regionList, ...this.curCheckBox])]
        },
        // 全不选(差集)
        checkNone(){
            this.msg.regionList = [...new Set([...this.msg.regionList].filter(x => !new Set(this.curCheckBox).has(x)))]
        },
        // 范围结果单个删除
        delTag(index){
            this.msg.regionList.splice(index, 1)
        }
    },
    mounted(){
        getRegionData({level:'1'}).then(data=>{
            this.baseRegions = data
        })
    }
}

async function getRegionData(params){
    // params.level
    // params.code
    let result = []
    let url = apiUrl
    if(params.code == '0'){
        params.level = '1'
        params.code = ''
    }
    if(params.level){
        url += params.level + '/'
    }
    if(params.level && params.code){
        url += '?code=' + params.code
    }

    console.log('范围选择请求地址：')
    console.log(url)

    await Axios.get(url).then(res=>{
        result = res.data.data
    })
    return result
}
</script>

<style scoped>
.check-box>div{
    border: 1px solid #8E44AD;
}
.check-box-item{
    height: 150px;
    overflow-y: auto;
}
.check-box .el-checkbox,
.check-box .el-tag,
.check-box .el-checkbox.is-bordered + .el-checkbox.is-bordered{
    margin:5px 0 5px 10px;
}
</style>
